<!--used-->
<template>
  <div class="resume-list-box">
    <div class="content-box">
      <!-- 分类列表 -->
      <category-list ref="categoryDom" @category-change="categoryChange"></category-list>
      <!-- 模板列表 -->
      <template-list-vue
          v-if="templateList.length && !isShowSkeleton"
          :template-list="templateList"
      ></template-list-vue>
      <!-- 暂无数据 -->
      <div v-if="!templateList.length && !isShowSkeleton" class="no-data-box">
        <no-data-vue></no-data-vue>
      </div>
      <!-- 等待动画 -->
      <div v-if="isShowSkeleton" class="no-data-box">
        <CommonLoad/>
      </div>
      <!-- 分页组件 -->
      <Pagination
          v-if="templateList.length && templateList.length < total"
          :total="total"
          :limit="limit"
          :current-page="currentPage"
          @handle-current-change="handleCurrentChange"
      ></Pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import CategoryList from './components/CategoryList.vue';
import TemplateListVue from './components/TemplateList.vue';
import NoDataVue from '@/components/NoData/NoData.vue';
import {ElMessage} from "element-plus";
import Pagination from "@/components/Pagination/pagination.vue";
import {templateListGet} from "@/http/m_api/template";
import CommonLoad from "@/components/common/commonLoad.vue";

// 是否显示骨架
const isShowSkeleton = ref<boolean>(true);

const categoryDom = ref<any>(null);

// 查询模板列表
const page = ref<number>(1);
const limit = ref<number>(12);
const total = ref<number>(0);
const currentPage = ref<number>(1);
const templateList = ref<any>([]);
const getTemplateList = async () => {
  isShowSkeleton.value = true;
  let filterValue = {
    categoryId: categoryDom.value.filterValue.templateStyle,
    useType: categoryDom.value.filterValue.templateUse,
    industry: categoryDom.value.filterValue.templateIndustry,
    post: categoryDom.value.filterValue.templatePost
  }
  let params = {
    page: page.value,
    size: limit.value,
    templateStatus: 1,
    ...filterValue,
    sortBy: 'id',
    sortDirection: 'ASC'
  };
  const data = await templateListGet(params);
  if (data.code === 0) {
    templateList.value = data.data.content;
    total.value = data.data.totalElements;
    currentPage.value = data.data.pageable.pageNumber;
    isShowSkeleton.value = false;
  } else {
    ElMessage.error(data.message);
    isShowSkeleton.value = false;
  }
};

// 分类发生变化
const categoryChange = () => {
  page.value = 1;
  templateList.value = [];
  getTemplateList();
};

onMounted(() => {
  getTemplateList();
});

// 改变页码时
const handleCurrentChange = (currentPage: number) => {
  page.value = currentPage;
  getTemplateList();
};
</script>
<style lang="scss" scoped>
.resume-list-box {
  min-height: 800px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #3b4a5c 100%);
  width: 100%;
  padding-bottom: 30px;

  .content-box {
    width: 1300px;
    margin: 0 auto;
    padding-bottom: 30px;
  }
}
</style>
